<!-- 模态框组件 -->

<!--
备注：使用此组件，只需要在引用后，直接在组件中构造需要的结构，也可以是其他组件
      例子：
    <popup ref="popup">
      <div>555</div>
    </popup>
-->

<!-- 传入属性 -->
<!--
direction:定义模态框展示从什么方向进行  （left：左边 ；right：右边 ；bottom：下方 ；top：上方 ； center：居中 ）  默认center
zIndexNumber:定义模态框层级 默认999
ifOpenAnimation:是否开起动画效果 true开起  false不开启 默认true
ifBlankClose:是否开起空白区域点击关闭  true开起  false不开启 默认true
-->

<!-- 传入方法 -->
<!--
运用ref进行使用打开或关闭模态框
    例：<popup ref="popup"></popup>
        在事件函数中使用
        this.$refs.popup.open() 打开
        this.$refs.popup.close() 关闭
-->

<template>
  <div
    class="popup"
    id="popup"
    @click.self="popupBlank"
    :style="[
      {
        alignItems:
          direction == 'left' || direction == 'right' || direction == 'center'
            ? 'center'
            : direction == 'top'
            ? 'flex-start'
            : 'flex-end'
      },
      {
        justifyContent:
          direction == 'top' || direction == 'bottom' || direction == 'center'
            ? 'center'
            : direction == 'right'
            ? 'end'
            : 'start'
      },
      {
        transition: ifOpenAnimation ? 'all 0.4s ' : 'none'
      },
      {
        zIndex: zIndexNumber
      }
    ]"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    // 定义模态框展示从什么方向进行  （left：左边 ；right：右边 ；bottom：下方 ；top：上方 ； center：居中 ）  默认center
    direction: {
      type: [String],
      default: 'center'
    },

    // 定义模态框层级 默认999
    zIndexNumber: {
      type: [String, Number],
      default: 999
    },

    // 是否开起动画效果 true开起  false不开启 默认true
    ifOpenAnimation: {
      type: [Boolean],
      default: true
    },

    // 是否开起空白区域点击关闭  true开起  false不开启 默认true
    ifBlankClose: {
      type: [Boolean],
      default: true
    }
  },
  data () {
    return {}
  },
  mounted () {
    // 使用初始化函数
    this.changeDirection()
  },
  watch: {
    //   监听自定义方向
    direction () {
      // 使用成员初始化函数
      this.changeDirection()
    }
  },
  methods: {
    //   空白区域点击函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    popupBlank () {
      if (this.ifBlankClose) {
        // 调取点击关闭函数
        this.close()
      }
    },

    //   打开模态框函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    open () {
      // 获取本组件的id名+style属性
      const popup = document.getElementById('popup').style

      // 判断各个方向，进行改变父级初始化方向
      //   左边时的样式
      if (this.direction == 'left') {
        popup.top = '0'
        popup.right = ''
        popup.bottom = ''
        popup.left = '0'
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   右边时的样式
      } else if (this.direction == 'right') {
        popup.top = '0'
        popup.right = '0'
        popup.bottom = ''
        popup.left = ''
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   上边时的样式
      } else if (this.direction == 'top') {
        console.log(this.direction)
        popup.top = '0'
        popup.right = ''
        popup.bottom = ''
        popup.left = '0'
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   下边时的样式
      } else if (this.direction == 'bottom') {
        popup.top = ''
        popup.right = ''
        popup.bottom = '0'
        popup.left = '0'
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   居中时的样式
      } else if (this.direction == 'center') {
        popup.top = '0'
        popup.right = ''
        popup.bottom = ''
        popup.left = '0'
        popup.display = 'flex'
        if (this.ifOpenAnimation) {
          document.getElementById('popup').className = 'open'
        }
      }
    },

    //   关闭模态框函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    close () {
      // 获取本组件的id名+style属性
      const popup = document.getElementById('popup').style

      // 判断是否是居中，是的话直接用此动画，否则使用初始化内容
      if (this.direction == 'center' && this.ifOpenAnimation) {
        popup.top = '0'
        popup.right = ''
        popup.bottom = ''
        popup.left = '0'
        // popup.opacity = "0";
        // popup.transform = "scale(0)";
        document.getElementById('popup').className = 'close'
        return
      }
      // 使用成员初始化函数
      this.changeDirection()
    },

    //   成员位置初始化函数
    // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    changeDirection () {
      // 获取本组件的id名+style属性
      const popup = document.getElementById('popup').style

      // 判断各个方向，进行改变父级初始化方向
      //   左边时的样式
      if (this.direction == 'left') {
        popup.top = '0'
        popup.right = ''
        popup.bottom = ''
        popup.left = '-100%'
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   右边时的样式
      } else if (this.direction == 'right') {
        popup.top = '0'
        popup.right = '-100%'
        popup.bottom = ''
        popup.left = ''
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   上边时的样式
      } else if (this.direction == 'top') {
        popup.top = '-100%'
        popup.right = ''
        popup.bottom = ''
        popup.left = '0'
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   下边时的样式
      } else if (this.direction == 'bottom') {
        popup.top = ''
        popup.right = ''
        popup.bottom = '-100%'
        popup.left = '0'
        popup.transform = 'scale(1)'
        popup.opacity = '1'

        //   居中时的样式
      } else if (this.direction == 'center') {
        popup.top = '0'
        popup.right = ''
        popup.bottom = ''
        popup.left = '0'
        popup.display = 'none'
      }
    }
  }
}
</script>

<style scoped>
/* 模态框组件 */
.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  background-color: rgba(38, 38, 38, 0.3);
  overflow: hidden;
}

/* 居中打开样式 */
.open {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  background-color: rgba(38, 38, 38, 0.3);
  overflow: hidden;
  animation: openCenter 0.2s linear forwards;
}

/* 居中关闭样式 */
.close {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  background-color: rgba(38, 38, 38, 0.3);
  overflow: hidden;
  animation: closeCenter 0.4s linear 0s forwards;
}
/* 居中打开动画 */
@keyframes openCenter {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 居中关闭动画 */
@keyframes closeCenter {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
</style>
